// 选择表情组件
<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      visible: false,
      emoji: Object.freeze([
        '😀',
        '😃',
        '😄',
        '😁',
        '😆',
        '😅',
        '🤣',
        '😂',
        '🙂',
        '🙃',
        '🫠',
        '😉',
        '😊',
        '😇',
        '🥰',
        '😍',
        '🤩',
        '😘',
        '😗',
        '😚',
        '😙',
        '🥲',
        '😋',
        '😛',
        '😜',
        '🤪',
        '😝',
        '🤑',
        '🤗',
        '🤭',
        '🫢',
        '🫣',
        '🤫',
        '🤔',
        '🫡',
        '🤐',
        '🤨',
        '😐',
        '😑',
        '😶',
        '🫥',
        '😏',
        '😒',
        '🙄',
        '😬',
        '🤥',
        '😌',
        '😔',
        '😪',
        '🤤',
        '😴',
        '😷',
        '🤒',
        '🤕',
        '🤢',
        '🤮',
        '🤧',
        '🥵',
        '🥶',
        '🥴',
        '😵',
        '🤯',
        '🤠',
        '🥳',
        '🥸',
        '😎',
        '🤓',
        '🧐',
        '😕',
        '🫤',
        '😟',
        '🙁',
        '😮',
        '😯',
        '😲',
        '😳',
        '🥺',
        '🥹',
        '😦',
        '😧',
        '😨',
        '😰',
        '😥',
        '😢',
        '😭',
        '😱',
        '😖',
        '😣',
        '😞',
        '😓',
        '😩',
        '😫',
        '🥱',
        '😤',
        '😡',
        '😠',
        '🤬',
        '😈',
        '👿',
        '💀',
        '💩',
        '🤡',
        '👹',
        '👺',
        '👻',
        '👽',
        '👾',
        '🤖',
        '😺',
        '😸',
        '😹',
        '😻',
        '😼',
        '😽',
        '🙀',
        '😿',
        '😾',
        '🙈',
        '🙉',
        '🙊',
        '💌',
        '💘',
        '💝',
        '💖',
        '💗',
        '💓',
        '💞',
        '💕',
        '💟',
        '💔',
        '🧡',
        '💛',
        '💚',
        '💙',
        '💜',
        '🤎',
        '🖤',
        '🤍',
        '💋',
        '💯',
        '💢',
        '💥',
        '💫',
        '💦',
        '💨',
        '💬',
        '💭',
        '💤',
        '👋',
        '🤚',
        '✋',
        '🖖',
        '🫱',
        '🫲',
        '🫳',
        '🫴',
        '👌',
        '🤌',
        '🤏',
        '🤞',
        '🫰',
        '🤟',
        '🤘',
        '🤙',
        '👈',
        '👉',
        '👆',
        '🖕',
        '👇',
        '🫵',
        '👍',
        '👎',
        '✊',
        '👊',
        '🤛',
        '🤜',
        '👏',
        '🙌',
        '🫶',
        '👐',
        '🤲',
        '🤝',
        '🙏',
        '💅',
        '🤳',
        '💪',
        '🦾',
        '🦿',
        '🦵',
        '🦶',
        '👂',
        '🦻',
        '👃',
        '🧠',
        '🫀',
        '🫁',
        '🦷',
        '🦴',
        '👀',
        '👅',
        '👄',
        '🫦',
        '👶',
        '🧒',
        '👦',
        '👧',
        '🧑',
        '👱',
        '👨',
        '🧔',
        '👩',
        '🧓',
        '👴',
        '👵',
        '🙍',
        '🙎',
        '🙅',
        '🙆',
        '💁',
        '🙋',
        '🧏',
        '🙇',
        '🤦',
        '🤷',
        '👮',
        '💂',
        '🥷',
        '👷',
        '🫅',
        '🤴',
        '👸',
        '👳',
        '👲',
        '🧕',
        '🤵',
        '👰',
      ]),
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    select(emoji) {
      this.visible = false
      this.$emit('select', emoji)
    },
  },
}
</script>

<template>
  <div class="copo-emoji" title="插入表情">
    <el-popover placement="right" trigger="click" v-model="visible">
      <ul class="emoji-wrap">
        <li v-for="(item, index) in emoji" :key="index" class="emoji" @click="select(item)">{{ item }}</li>
      </ul>
      <div slot="reference">{{ emoji[0] }}</div>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
.copo-emoji {
  display: inline-block;
}
.emoji-wrap {
  display: inline-block;
  width: 400px;
  height: 400px;
  overflow: auto;
  .emoji {
    display: inline-block;
    padding: 7px 7px 4px;
    border-radius: 4px;
    margin: 3px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>
